<template>
  <div class="bill-detail">
    <div class="header">
      <h1>账单明细</h1>
    </div>

    <!-- 标签页和时间选择在同一行 -->
    <div class="filter-bar">
      <el-tabs v-model="activeTab" class="custom-tabs" @tab-click="handleClick">
        <el-tab-pane label="使用记录" name="useRecord">
          <el-table :data="tableData" height="618" class="custom-table" :border="false"
            v-el-table-infinite-scroll="loadData" v-loading="loading" element-loading-text="加载中..."
            element-loading-background="rgba(0, 0, 0, 0.8)">
            <el-table-column prop="uniqueId" label="订单编号" width="260"></el-table-column>
            <el-table-column prop="targetName" label="名称" width="200"></el-table-column>
            <el-table-column prop="startTime" label="开始时间" width="180"></el-table-column>
            <el-table-column prop="endTime" label="结束时间" width="180"></el-table-column>
            <el-table-column prop="sessionDurationDesc" label="使用时长" width="100"></el-table-column>
            <el-table-column prop="consumedDesc" align="right" label="消耗云豆" width="100">
              <template #default="scope">
                <span class="cloud-bean-value">{{ scope.row.consumedCoins }}</span>
              </template>
            </el-table-column>

            <template #empty>
              <div class="custom-empty">
                <img src="@/assets/images/userCenter/empty.png" alt="">
              </div>
            </template>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="云豆变更" name="cloudBeanChange">
          <el-table :data="PeatableData" height="618" class="custom-table" :border="false"
            v-el-table-infinite-scroll="loadData2" v-loading="loading" element-loading-text="加载中..."
            element-loading-background="rgba(0, 0, 0, 0.8)">
            <el-table-column prop="uniqueId" label="订单编号"></el-table-column>
            <el-table-column prop="title" label="名称"></el-table-column>
            <el-table-column prop="time" label="开始时间"></el-table-column>
            <el-table-column prop="content" align="right" label="云豆">
              <template #default="scope">
                <span class="cloud-bean-value" style="color: #D55928;" v-if="scope.row.content.indexOf('-') != -1">{{
                  scope.row.content }}</span>
                <span class="cloud-bean-value" v-else>+{{ scope.row.content }}</span>
              </template>
            </el-table-column>

            <template #empty>
              <div class="custom-empty">
                <img src="@/assets/images/userCenter/empty.png" alt="">
              </div>
            </template>
          </el-table>
        </el-tab-pane>
      </el-tabs>

      <div class="query-section">
        <span style="color: #999999;">开始时间：</span>
        <el-select v-model="timeRange" placeholder="请选择" popper-class="custom-select-popper">
          <el-option label="最近七天" value="1"></el-option>
          <el-option label="最近15天" value="2"></el-option>
          <el-option label="最近一个月" value="3"></el-option>
          <el-option label="最近三个月" value="4"></el-option>
          <el-option label="最近六个月" value="5"></el-option>
        </el-select>
        <el-button color="#FFE500" @click="handleQuery">查询</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'BillDetails'
})
import { ref, onMounted } from 'vue';

import { getBillList, getBillChangeList } from '@/api/user';

const handleClick = (tab) => {
  tableData.value = [];
  PeatableData.value = [];
  // 重置分页索引
  PageIndex.value = 1;
  loading.value = false;
  hasMore.value = true;

  if (tab.index == 0) {
    GetBillList()
  }
  if (tab.index == 1) {
    GetBillChangeList()
  }
}
// 标签页激活状态
const activeTab = ref('useRecord');
// 时间范围选择
const timeRange = ref('1');
// 使用记录 -- 表格数据
const tableData = ref([]);
const loading = ref(false);
const PageIndex = ref(1);
const hasMore = ref(true);
// 云豆变更 -- 表格数据
const PeatableData = ref([]);


const loadData = async () => {
  // 只有当没有在加载中且还有更多数据时才触发加载
  if (!loading.value && hasMore.value) {
    await GetBillList();
  }
}

const loadData2 = async () => {
  // 只有当没有在加载中且还有更多数据时才触发加载
  if (!loading.value && hasMore.value) {
    await GetBillChangeList();
  }
}


// 获取使用记录列表
const GetBillList = async () => {
  // 如果已经没有更多数据了，直接返回
  if (!hasMore.value) return;

  loading.value = true;

  var panamr = {
    "page": PageIndex.value,
    "rows": 20,
    "startDateTime": "",
    "endDateTime": ""
  };
  // 修改你的查询逻辑部分
  if (timeRange.value == '1') {
    // 最近七天
    panamr.startDateTime = getDate('day', 7);
  } else if (timeRange.value == '2') {
    // 最近15天
    panamr.startDateTime = getDate('day', 15);
  } else if (timeRange.value == '3') {
    // 最近一个月（按月计算）
    panamr.startDateTime = getDate('month', 1);
  } else if (timeRange.value == '4') {
    // 最近三个月（按月计算）
    panamr.startDateTime = getDate('month', 3);
  } else if (timeRange.value == '5') {
    // 最近六个月（按月计算）
    panamr.startDateTime = getDate('month', 6);
  }
  panamr.endDateTime = getDate('day', 0);

  try {
    const response = await getBillList(panamr);
    const { sessions } = response || {};

    // 处理返回的数据
    if (sessions && sessions.length > 0) {
      tableData.value = tableData.value.concat(sessions);
      PageIndex.value++;
      // 根据返回的数据量判断是否还有更多数据
      // 如果返回的数据量小于请求的rows数量，说明已经没有更多数据了
      hasMore.value = sessions.length === panamr.rows;
    } else {
      // 如果返回的数据为空，则没有更多数据了
      hasMore.value = false;
    }
  } catch (error) {
    console.error('获取订单列表失败:', error);
  } finally {
    // 重置loading状态
    loading.value = false;
  }
};

// 获取云豆变更列表
const GetBillChangeList = async () => {
  // 如果已经没有更多数据了，直接返回
  if (!hasMore.value) return;

  loading.value = true;

  var panamr = {
    "page": PageIndex.value,
    "rows": 20,
    "startDateTime": "",
    "endDateTime": ""
  };
  // 修改你的查询逻辑部分
  if (timeRange.value == '1') {
    // 最近七天
    panamr.startDateTime = getDate('day', 7);
  } else if (timeRange.value == '2') {
    // 最近15天
    panamr.startDateTime = getDate('day', 15);
  } else if (timeRange.value == '3') {
    // 最近一个月（按月计算）
    panamr.startDateTime = getDate('month', 1);
  } else if (timeRange.value == '4') {
    // 最近三个月（按月计算）
    panamr.startDateTime = getDate('month', 3);
  } else if (timeRange.value == '5') {
    // 最近六个月（按月计算）
    panamr.startDateTime = getDate('month', 6);
  }
  panamr.endDateTime = getDate('day', 0);
  try {
    const response = await getBillChangeList(panamr);
    const { bills } = response || {};

    // 处理返回的数据
    if (bills && bills.length > 0) {
      PeatableData.value = PeatableData.value.concat(bills);
      PageIndex.value++;
      // 根据返回的数据量判断是否还有更多数据
      // 如果返回的数据量小于请求的rows数量，说明已经没有更多数据了
      hasMore.value = bills.length === panamr.rows;
    } else {
      // 如果返回的数据为空，则没有更多数据了
      hasMore.value = false;
    }
  } catch (error) {
    console.error('获取订单列表失败:', error);
  } finally {
    // 重置loading状态
    loading.value = false;
  }
};

// 查询按钮点击事件
const handleQuery = () => {
  if (activeTab.value == 'useRecord') {
    tableData.value = [];
    PageIndex.value = 1;
    loading.value = false;
    hasMore.value = true;
    GetBillList()
  }
  if (activeTab.value == 'cloudBeanChange') {
    PeatableData.value = [];
    PageIndex.value = 1;
    loading.value = false;
    hasMore.value = true;
    GetBillChangeList()
  }
};
// 获取日期
const getDate = (type, value) => {
  const now = new Date();
  
  if (type === 'day') {
    // 按天数计算
    now.setDate(now.getDate() - value);
  } else if (type === 'month') {
    // 按月计算
    now.setMonth(now.getMonth() - value);
  }
  
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const date = String(now.getDate()).padStart(2, '0');
  return `${year}-${month}-${date}`;
}


</script>

<style lang="scss" scoped>
.bill-detail {
  padding: 20px;
  box-sizing: border-box;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;

    h1 {
      font-size: 24px;
      margin: 0;
      color: #E2E2E2;
      font: "Microsoft YaHei UI";
      font-weight: bold;
    }
  }
}




/* 标签页和查询区域在同一行 */
.filter-bar {
  width: 100%;
  position: relative;

}

.query-section {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;

}

.query-section .el-select {
  width: 140px;
}

/* 自定义标签页样式 */
.custom-tabs {
  width: auto;
}

/* 取消标签栏下面的横线 */
:deep(.el-tabs__nav-wrap:after) {
  height: 0;
}

/* 隐藏默认的下划线指示器 */
:deep(.el-tabs__active-bar) {
  display: none !important;
}

/* 标签页容器 */
:deep(.el-tabs__nav) {
  background-color: transparent;
  padding: 0;
}

/* 标签页项样式 - 未选中状态 */
:deep(.el-tabs__item) {
  /* 两个标签之间的间隔 */
  margin-right: 10px !important;
  /* 确保文字水平居中的关键样式 */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* 固定宽度确保两个标签宽度一致 */
  width: 120px;
  /* 未选中的样式 */
  background-color: #232527;
  border: none;
  color: #888888;
  /* 内边距控制标签高度 */
  padding: 8px 0;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* 最后一个标签去除右边距 */
:deep(.el-tabs__item:last-child) {
  margin-right: 0 !important;
}

/* 激活的标签页样式 - 选中状态 */
:deep(.el-tabs__item.is-active) {
  background-color: transparent;
  border: 1px solid #FFE500;
  color: #FFE500 !important;
  font-weight: 500;
}

:deep(.el-select__wrapper) {
  background-color: #232527;
  box-shadow: none;
}

/* 标签页悬停效果 */
:deep(.el-tabs__item:not(.is-active):hover) {
  color: #aaa;
  background-color: #2a2c2e;
}

/* 表格样式调整 */
.custom-table {
  height: 618px;
  border: none !important;
  border-radius: 4px !important;
  overflow: hidden;

  :deep(.cell) {
    padding: 0 20px !important;
  }
}

:deep(.el-table th.el-table__cell.is-leaf) {

  border-bottom: none !important;
}

:deep(.el-table) {
  --el-table-border-color: none !important;
}

/* 表头样式 */
:deep(.custom-table th.el-table__cell) {
  background-color: #36393C !important;
  color: #888888 !important;
  font-weight: normal;
}


/* 表格内容样式 */
:deep(.custom-table td.el-table__cell) {
  background-color: #232527 !important;
  color: #888 !important;
}


:deep(.el-table td, .el-table th.is-leaf) {
  border-bottom: none;
}

:deep(.el-table::before) {
  height: 0;
}

.cloud-bean-value {
  font-family: Microsoft YaHei UI;
  font-weight: 700;
  font-style: Bold;
  font-size: 14px;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: right;
  color: #E2E2E2;
}
</style>